<template>
  <div class="login-box">
    
    <div class="login-content" >
      <div v-show="loginImg">
      <h3>野鸡管理系统</h3>
      <el-input
        v-model="account"
        prefix-icon="el-icon-user-solid"
        placeholder="请输入账号"
        clearable
       style="margin-bottom: 20px; margin-top: 30px"
      />
<el-input placeholder="请输入密码" v-model="password" show-password clearable  prefix-icon="el-icon-lock"></el-input>
      <el-button
      type="primary"
        @click="loginBtn"
        style="  width: 100%;
          height: 40px;
          margin-top:25px
        "
        >提交</el-button >
      <p v-show="show" style="color: red;text-align: center;margin-top: 20px;">您输入的账号或者密码错误</p>
      </div>
    <slide-verify
    v-show="verifyImg"
  :l="42"
  :r="10"
  :w="310"
  :h="155"
  @success="onSuccess"

  slider-text="滑动解锁"  
></slide-verify>
    </div>

  </div>
</template>

<script>
import { login } from "@/apis/users";
export default {
  data() {
    return {
      verifyImg:false,   //图形验证码
      loginImg:true,  //登录那个界面
      account: "",
      password: "",
      show: false,
      id:""   //用户的id
    };
  },
  methods: {
    //点击登录,跳转到home
    loginBtn() {
  this.verifyImg=true
  this.loginImg=false  
    },
    onSuccess(){
       login({ account: this.account, password: this.password }).then((res) => {
        if (res.data.code == 0) {
          sessionStorage.setItem("userData",JSON.stringify({ id: this.id, password: this.password }),
          localStorage.token=res.data.token,  //用户的token
          localStorage.id=res.data.id,  //用户的id
          localStorage.role=res.data.role,  //用户的角色
          localStorage.acc=this.account ,  //用户的账号
            this.$message({
            message: "恭喜你，" + this.account + "登录成功!",
            type: "success",
          }),
           this.$router.push("/home/homepages")
         
          ); //把数据存到sessionStorage
        } else {
          this.show = true;
            this.verifyImg=false
  this.loginImg=true 
        }
      });
    },
  
  },
};
</script>
<style lang="less" scoped>
@ccolor: #6699cc;
@cfff: #fff;
.login-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: @ccolor;
}
.login-content {
  border-radius:10px; 
   color: #fff;
  width: 400px;
  padding: 30px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.2);
  h3 {
    text-align: center;
    font-size: 30px;
  }
}
.slide-verify{
  left: 10%;
}

</style>